<template>
	<view class="container">
		<!-- 状态栏 -->
		<view :class="statusBarViewClass"></view>
		<!-- 导航栏 -->
		<view class="customer-nav-view nav-sticky">
			<view class="customer-nav-left">
				<uni-icons type="back" color='#000000' size="24" @click="goBackPage"></uni-icons>
			</view>
			<view class="customer-nav-title">
				账号安全
			</view>
			<view class="customer-nav-right">
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="content-item" @click="goChangeEmail">
			<view class="content-item-left">
				<text class="text-left">更换邮箱</text>
			</view>
			<view class="content-item-right">
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="content-item" @click="goUpdatePassword">
			<view class="content-item-left">
				<text class="text-left">修改密码</text>
			</view>
			<view class="content-item-right">
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="content-item" @click="goResetPassword">
			<view class="content-item-left">
				<text class="text-left">重置密码</text>
			</view>
			<view class="content-item-right">
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="content-item" @click="openAlertDialog(2)">
			<view class="content-item-left">
				<text class="text-left">注销账号</text>
			</view>
			<view class="content-item-right">
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>

		<!-- 保存信息 -->
		<button class="bt-save" @click="openAlertDialog(1)">退出登陆</button>


		<!-- 通用提示窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" :confirmText="alertConfirmText" :title="alertTitle"
				:content="alertContent" @confirm="alertConfirmEv"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onUnmounted,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		showToast,
		getUserInfo,
		clearUserInfo,
		getUserToken
	} from '@/utils/utils.js'
	import api from '@/config/api'
	import request from '@/utils/request'

	const statusBarViewClass = ref("status-bar-view-2")
	const userInfo = ref(getUserInfo())

	const alertDialog = ref(null)
	const alertTitle = ref("")
	const alertContent = ref("")
	const alertConfirmText = ref("")
	const alertDialogType = ref(0)

	// 打开Confirm提示框
	const openAlertDialog = (type) => {
		if (type == 1) {
			alertDialogType.value = type
			alertContent.value = "退出后将看不到部分影视，确认退出吗？"
			alertTitle.value = "退出登陆"
			alertConfirmText.value = '确认退出'
			alertDialog.value.open()
		} else if (type == 2) {
			alertDialogType.value = type
			alertContent.value = "注销会彻底删除账号，并立即生效。\n\n注销后将看不到部分影视，确认注销吗？"
			alertTitle.value = "注销账号"
			alertConfirmText.value = '确认注销'
			alertDialog.value.open()
		}
	}

	// Confirm提示框确认事件
	const alertConfirmEv = () => {
		if (alertDialogType.value == 1) {
			loginOut()
		} else if (alertDialogType.value == 2) {
			goDeleteAccount()
		}
	}

	// 退出登陆
	const loginOut = () => {
		request.post(api.host + api.loginOutUrl, {
			token: getUserToken()
		}).then(() => {
			clearUserInfo()
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}).catch(() => {
			clearUserInfo()
			uni.reLaunch({
				url: '/pages/index/index'
			})
		})
	}

	// 前往修改密码
	const goUpdatePassword = () => {
		uni.navigateTo({
			url: '/pages/manage_account/update_password'
		})
	}

	// 前往重置密码
	const goResetPassword = () => {
		uni.navigateTo({
			url: '/pages/manage_account/reset_password'
		})
	}

	// 前往更换邮箱
	const goChangeEmail = () => {
		uni.navigateTo({
			url: '/pages/manage_account/change_email'
		})
	}

	// 前往注销账号
	const goDeleteAccount = () => {
		uni.navigateTo({
			url: '/pages/manage_account/delete_account'
		})
	}

	// 返回
	const goBackPage = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	@import url("manage_account.css");
</style>